<template>
  <a-modal :width="450" :title="title" v-model="visible" :maskClosable="false" :confirmLoading="loading" @ok="onSubmit" @cancel="() => (visible = false)">
    <a-spin :delay="100" :spinning="loading">
      <a-form-model ref="sjhtform" :model="form" :rules="rules" :labelCol="lcol" :wrapperCol="wcol" @submit="onSubmit" @submit.native.prevent>
        <a-form-model-item label="IP地址" prop="ipAddress">
          <a-input v-model="form.ipAddress" allowClear :maxLength="15" placeholder="请输入IP地址" />
        </a-form-model-item>
        <a-form-model-item label="备注" prop="notes">
          <a-textarea v-model="form.notes" allowClear :maxLength="255" placeholder="请输入备注（限255字）" :rows="3" />
        </a-form-model-item>
      </a-form-model>
    </a-spin>
  </a-modal>
</template>
<script>
import regexp from '@/utils/validate'
import { SaveIpwhitelist } from '@/api/manage/ipwhitelist'
import { form } from '@/utils/mixins'
export default {
  name: 'SjhtIpwhiteForm', //IP白名单配置表单
  mixins: [form],
  data() {
    return {
      rules: {
        ipAddress: [
          { required: true, whitespace: true, message: '请输入IP地址', trigger: 'blur' },
          { pattern: regexp.ip, message: 'IP地址错误', trigger: 'blur' }
        ],
        notes: [{ required: true, whitespace: true, message: '请输入备注', trigger: 'blur' }]
      }
    }
  },
  methods: {
    // 打开添加窗口
    create(channel) {
      if (!this.loading) {
        this.reset()
        this.title = `渠道【${channel.name}】添加IP白名单配置`
        this.form = {
          activityId: channel.id,
          activityName: channel.name,
          appid: channel.appid,
          notes: channel.name
        }
      }
      this.visible = true
    },
    //打开修改窗口
    update(data) {
      if (!this.loading) {
        this.reset()
        this.title = `修改渠道【${data.channelName}】IP白名单配置`
        this.form = {
          id: data.id,
          appid: data.appid,
          ipAddress: data.ipAddress,
          notes: data.notes
        }
      }
      this.visible = true
    },
    // 点击确定
    onSubmit(e) {
      e.preventDefault()
      this.$refs.sjhtform.validate(valid => {
        if (!valid) return false
        this.submit(SaveIpwhitelist, this.form)
      })
    }
  }
}
</script>